<template>
  <div class="app-container">
      <!-- 搜索框 -->
    <el-form :inline="true" :model="searchMap.data" class="demo-form-inline">
      <el-form-item>
       <el-select v-model="searchMap.data.scenicId" filterable placeholder="请选择景点">
            <el-option
            v-for="item in attractionsList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
       <el-select v-model="searchMap.data.tags" filterable placeholder="是否点赞">
            <el-option
            v-for="item in options"
            :key="item.tags"
            :label="item.label"
            :value="item.tags">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData()">查询</el-button>
      </el-form-item>
    </el-form>
<!-- 表格列表 -->
    <el-table
      :data="scenicEvaluationList"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="评价id" width="120"> </el-table-column>
      <el-table-column prop="user.account" label="用户账户"  width="200"> </el-table-column>
      <el-table-column prop="tags" label="是否点赞">
        <template slot-scope="scope">
          <p v-if="scope.row.tags == 2">未点赞</p>
          <p v-if="scope.row.tags == 1">已点赞</p>
        </template>
      </el-table-column>
      <el-table-column prop="score" label="评分" show-overflow-tooltip></el-table-column>
      <el-table-column prop="attractions.name" label="景点名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="content" label="评价内容" show-overflow-tooltip></el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <div >
            <el-button
              type="primary"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
<!-- 分页 -->
    <div class="block">
    <el-pagination
    style="float: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchMap.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total">
    </el-pagination>
    </div>

      

  </div>
</template>

<script>
import {search,delOne,findAll} from '@/api/scenicEvaluation'
export default {
  data() {
    return {
       options: [{
          tags: 2,
          label: '未点赞'
        }, {
          tags: 1,
          label: '已点赞'
        }],
      dialogFormVisible_edit: false, //编辑弹窗开关
      dialogFormVisible_add: false, //添加弹窗开关
      scenicEvaluationList: [],
      headers:{},
      editDialogData: {},
      attractionsList:[],
      searchMap:{
          page:1,
          limit:5,
          data:{
           
          }
      },
      total:0,
      scenicEvaluation:{},
      delData:{},
    };
  },
  methods:{
    handleDelete(index, row) {
      this.delData = row;
      this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delOne(this.delData).then((res) => {
        if (res.success) {
          this.searchData();
          this.$message({
            showClose: true,
            message: res.msg,
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error",
          });
        }
        }
       );
      })
      },
     
     searchData(){
          var _this=this
          search(this.searchMap).then(res=>{
              _this.scenicEvaluationList=res.data
              _this.total=res.total
              console.log(res.data)
          })
      },
      handleSizeChange(size){
          this.searchMap.limit=size
          this.searchData()
      },
      handleCurrentChange(currentPage){
          this.searchMap.page=currentPage
           this.searchData()
      },
    
  },
  created(){
      this.searchData();
      findAll().then(res=>{
        this.attractionsList=res;
      })
  },
};
</script>